<!DOCTYPE html>
<html lang="zh" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>用户列表 - 后台管理系统</title>
    <link rel="icon" href="images/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script src="js/head.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--<script src="js/login/login.js"></script>-->
    <script src="js/http.js"></script>
</head>

<body>
<div class="lyear-layout-web" id="vue">

    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <script src="js/leftNav.js"></script>
                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                                   href="http://lyear.itshubao.com">IT书包</a> All rights
                        reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default dropdown-toggle" id="search-btn"
                                                    type="button" aria-haspopup="true" aria-expanded="false"
                                                    @click="fuzzyQueryUser">
                                                搜索
                                            </button>
                                        </div>
                                        <input type="text" class="form-control" value="" name="keyword"
                                               v-model="inputText"
                                               placeholder="请输入用户名">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="addUser.html"><i class="mdi mdi-plus"></i> 新增</a>
                                    <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                                    <a class="btn btn-info" data-target="#sendAdvice" data-toggle="modal" @click="checkOptions"><i
                                            class="mdi mdi-comment-multiple-outline" ></i> 发送通知</a>
                                </div>
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all" v-model="setAll" @change="onChange"><span></span>
                                                </label>
                                            </th>
                                            <th>编号</th>
                                            <th>用户昵称</th>
                                            <th>手机号码</th>
                                            <th>邮箱</th>
                                            <th>余额</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="user in userList">
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" :value="user.id"
                                                           v-model="idList"><span></span>
                                                </label>
                                            </td>
                                            <td>{{user.id}}</td>
                                            <td>{{user.nickname}}</td>
                                            <td>{{user.telephone}}</td>
                                            <td>{{user.email}}</td>
                                            <td>{{user.balance}}</td>
                                            <td><span class="label label-success" v-if="user.type===1">普通用户</span>
                                                <span class="label label-danger" v-else>管理员</span>
                                            <td>
                                                <div class="btn-group">
                                                    <button class="btn btn-xs btn-default" title="编辑"
                                                            data-toggle="modal" data-target="#editModal"
                                                            @click="selectUser(user.id)"><i
                                                            class="mdi mdi-pencil"></i></button>
                                                    <button class="btn btn-xs btn-default" title="查看"
                                                            data-toggle="modal" data-target="#detailModal"
                                                            @click="selectUser(user.id)">
                                                        <i class="mdi mdi-eye"></i></button>
                                                    <button class="btn btn-xs btn-default" title="删除"
                                                            data-toggle="modal" data-target="#warningModal"
                                                            @click="selectUser(user.id)">
                                                        <i class="mdi mdi-window-close"></i></button>
                                                </div>
                                                <!--详情模态框start-->
                                                <div class="modal fade" id="detailModal" tabindex="-1" role="dialog"
                                                     aria-labelledby="myModalLabel">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="myModalLabel">查看用户详情</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <ul class="list-unstyled" id="order_message">
                                                                    <li><p class="text-center"><strong>用户名:</strong>{{userName}}
                                                                    </p>
                                                                    </li>
                                                                    <li><p class="text-center"><strong>密码:</strong>{{password}}
                                                                    </p>
                                                                    </li>
                                                                    <li><p class="text-center">
                                                                        <strong>手机号码:</strong>{{telephone}}</p></li>
                                                                    <li><p class="text-center"><strong>邮箱:</strong>{{email}}
                                                                    </p>
                                                                    </li>
                                                                    <li><p class="text-center">
                                                                        <strong>钱包余额:</strong><span
                                                                            style="color: red">{{balance}}</span>
                                                                    </p></li>
                                                                    <li><p class="text-center">
                                                                        <strong>用户类型:</strong><span
                                                                            class="text-success"
                                                                            v-if="type===1">普通用户</span>

                                                                        <span class="text-danger" v-else>管理员</span></p>
                                                                    </li>
                                                                    <li><p class="text-center">
                                                                        <strong>创建时间:</strong>{{createTime}}</p></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--模态框end-->
                                                <!--警告模态框start-->
                                                <div class="modal fade bs-example-modal-sm" id="warningModal"
                                                     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                                    <div class="modal-dialog modal-sm" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span
                                                                        aria-hidden="true">×</span></button>
                                                                <h4 class="modal-title text-danger"
                                                                    id="myLargeModalLabel">警告！！！</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                删除用户信息后无法修复！确定要删除嘛？
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-default"
                                                                        data-dismiss="modal">我怂了
                                                                </button>
                                                                <button type="button" class="btn btn-primary"
                                                                        data-dismiss="modal"
                                                                        @click="deleteUser(userId)">确定
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--警告模态框end-->
                                                <!--编辑信息模态框start-->
                                                <div class="modal fade" id="editModal" tabindex="-1" role="dialog"
                                                     aria-labelledby="exampleModalLabel">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="close" data-dismiss="modal"
                                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                                </button>
                                                                <h4 class="modal-title" id="exampleModalLabel">编辑信息</h4>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div>
                                                                    <label class="control-label">修改用户名：</label>
                                                                    <input type="text" class="form-control"
                                                                           v-model="userName"><span
                                                                        v-if="nameRepetition===1" class="text-danger">用户名重复，不可用！</span>
                                                                    <spane v-else></spane>
                                                                </div>
                                                                <div>
                                                                    <label class="control-label">修改密码：</label>
                                                                    <input type="text" class="form-control"
                                                                           v-model="password">
                                                                </div>
                                                                <div>
                                                                    <label class="control-label">修改手机号码：</label>
                                                                    <input type="text" class="form-control"
                                                                           v-model="telephone">
                                                                </div>
                                                                <div>
                                                                    <label class="control-label">修改邮箱：</label>
                                                                    <input type="text" class="form-control"
                                                                           v-model="email">
                                                                </div>
                                                                <div>
                                                                    <label class="control-label">修改昵称：</label>
                                                                    <input type="text" class="form-control"
                                                                           v-model="nickname">
                                                                </div>
                                                                <div style="padding-top: 20px">
                                                                    <input type="radio" id="one" value="1"
                                                                           v-model="type">
                                                                    <label for="one" class="text-success">普通用户</label>
                                                                    <input type="radio" id="two" value="99"
                                                                           v-model="type">
                                                                    <label for="two" class="text-danger">管理员</label>
                                                                </div>

                                                            </div>
                                                            <div class="modal-footer">
                                                                <span v-if="successSubmit===1" class="text-success">保存成功！</span>
                                                                <button type="button" class="btn btn-primary"
                                                                        @click="updateUser(userId)">保存信息
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--编辑信息模态框end-->
                                            <!--发送消息模态框start-->
                                            <div class="modal fade bs-example-modal-sm" id="sendAdvice"
                                                 tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                                <div class="modal-dialog modal-lg" role="document">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal"
                                                                    aria-label="Close"><span
                                                                    aria-hidden="true">×</span></button>
                                                            <h4 class="modal-title"
                                                                v-if="setAll==false">发送通知给指定对象</h4>
                                                            <h4 class="modal-title"
                                                                v-else>发送全局通知</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div>
                                                                <label class="control-label">请输入通知内容：</label>
                                                                <textarea class="form-control" rows="5"
                                                                          placeholder="请输入" v-model="content" ></textarea>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-default"
                                                                    data-dismiss="modal">取消
                                                            </button>
                                                            <button type="button" class="btn btn-primary"
                                                                    data-dismiss="modal"
                                                                    @click="addAdvice">发送
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!--发送消息模态框end-->
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        {{idList}}
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#vue',
        data: {
            content:"",
            setAll:"",
            idList: [],
            userList: "",
            userId: "",
            userName: "",
            password: "",
            telephone: "",
            email: "",
            nickname: "",
            balance: "",
            type: "",
            createTime: "",
            nameRepetition: "",
            successSubmit: "",
            inputText: "",
        },
        methods: {
            /**
             * 通过用户id查询到用户信息
             * @param userId 用户id
             */
            selectUser: function (userId) {
                console.log(userId);
                vm.nameRepetition = 0;
                vm.successSubmit = 0;
                $.ajax({
                    type: "POST",
                    url: baseUrl + "education_admin/user/selectUser",
                    data: {
                        id: userId
                    },
                    success: function (resp) {
                        /*let result = JSON.parse(resp);*/
                        let user = resp.data;
                        vm.userId = user.id;
                        vm.userName = user.username;
                        vm.nickname = user.nickname;
                        vm.password = user.password;
                        vm.telephone = user.telephone;
                        vm.email = user.email;
                        vm.balance = user.balance;
                        vm.type = user.type;
                        vm.createTime = user.createTime;
                    }
                })
            },
            /**
             * 通过用户id删除用户信息
             * @param userId 用户id
             */
            deleteUser: function (userId) {

                $.ajax({
                    type: "GET",
                    url: baseUrl + "education_admin/user/deleteUser",
                    data: {
                        id: userId
                    },
                    success: function (resp) {
                        /*let result = JSON.parse(resp);*/
                        alert(resp.message);
                        location.reload();
                    }
                })
            },
            /**
             * 修改用户信息
             * @param userId
             */
            updateUser: function (userId) {
                username = vm.userName;
                password = vm.password;
                telephone = vm.telephone;
                email = vm.email;
                nickname = vm.nickname;
                type = vm.type;
                $.ajax({
                    type: "POST",
                    url: baseUrl + "education_admin/user/updateUser",
                    data: {
                        id: userId,
                        username,
                        password,
                        telephone,
                        email,
                        nickname,
                        type,
                    },
                    success: function (resp) {
                        console.log(resp);

                        if (resp.message == "用户名重复") {
                            console.log(resp.message);
                            vm.nameRepetition = 1;
                        } else {
                            /*let result = JSON.parse(resp);*/
                            vm.successSubmit = 1;
                            location.reload();
                        }

                    }
                })
            },
            /**
             * 模糊查询
             */
            fuzzyQueryUser: function () {
                intput = vm.inputText;
                $.ajax({
                    type: "POST",
                    url: baseUrl + "education_admin/user/fuzzyQueryUser",
                    data: {
                        nickname: intput
                    },
                    success: function (resp) {
                        /* let result = JSON.parse(resp);*/
                        vm.userList = resp.data;
                    }
                })
            },
            /**
             * 发送通知
             */
            addAdvice: function () {
                console.log(vm.setAll)
                //发送通知给指定对象
                if (vm.idList.length!=0 && vm.setAll!=true)
                {
                    $.ajax({
                        type: 'post',
                        dataType: 'json',
                        url: baseUrl + "education_admin/systemAdvice/addAdvice",
                        traditional: true,
                        data: {
                            content:vm.content,
                            readState: 0,
                            idList: vm.idList,
                        },
                        success: function (resp) {
                            console.log(resp)
                            alert(resp.message);
                        }
                    })
                }
                //发送全局通知
                if (vm.idList.length==0 && vm.setAll == true) {
                    $.ajax({
                        type: 'post',
                        url: baseUrl + "education_admin/systemAdvice/addAdviceToAll",
                        data: {
                            content:vm.content,
                            readState: 0,
                        },
                        success: function (resp) {
                            console.log(resp)
                            alert(resp.message);
                        }
                    })
                }
            },
            /**
             * 全选按钮
             */
            onChange:function () {
                if (vm.setAll == true) {
                    vm.idList.length=0;
                }
            },
            checkOptions:function () {
                if (vm.idList.length == 0 && vm.setAll!=true) {
                    alert("请先选择要接收通知的对象")
                    location.reload();
                }
            }
        },
        mounted: function () {
            let url = "user/userList";
            httpRequest(url);
        }

    })

    function httpRequest(url) {
        $.ajax({
            type: "get",
            url: baseUrl + "education_admin/" + url,
            data: {},
            success: function (resp) {
                /*let result = JSON.parse(resp);*/
                vm.userList = resp.data;
            }
        })
    }

    function handlerResp(resp) {
        //json 装换为js对象
        let result = JSON.parse(resp);
        //业务状态码判断
        if (result.status == 0) {
            //业务处理成功
            let data = result.data;
            //具体业务处理 登录：跳转首页，商品列表：渲染列表
            return data;
        } else {
            //业务处理失败
            alert(result.msg);
        }
    }

</script>
</body>
</html>